<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>信息设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">

    <script src="/lib/layui/layui.js"></script>
    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/js/common.js"></script>

</head>

<body>

<!--&lt;!&ndash;style="margin-left: 20px ;margin-top: 10px" class="demoTable"&ndash;&gt;display: flex;-->
<div style="margin-left: 20px ;margin-top: 10px" class="demoTable">
<!--    <form class="layui-form layui-form-pane" action="">-->

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">变量名</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">报警组</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">报警类型</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="types" lay-verify="required" lay-search="" id="types">-->
<!--                    <option value="">直接选择或搜索选择</option>-->
<!--                    <option value="1">紧急报警</option>-->
<!--                    <option value="2">重要报警</option>-->
<!--                    <option value="2">一般报警</option>-->
<!--                </select>-->
<!--            </div>-->

<!--            <a class="layui-btn" data-type="reload">搜索</a>-->
<!--        </div>-->

<!--    </form>-->

    <form class="layui-form" action="">
        <div class="demoTable">
            <div style="display: flex;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">变量名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="variable" name="variable" lay-verify="required" placeholder="请输入变量名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报警组</label>
                    <div class="layui-input-inline">
                        <input type="text" id="groups" name="groups" lay-verify="required" placeholder="请输入报警组名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                        <div class="layui-inline">
                            <label style="width: 90px;" class="layui-form-label">报警类型</label>
                            <div class="layui-input-inline">
                                <select id="levels" name="levels" lay-verify="required" lay-search="" >
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="1">紧急报警</option>
                                    <option value="2">重要报警</option>
                                    <option value="3">一般报警</option>
                                </select>
                            </div>

                            <a style="margin-left: 20px" class="layui-btn" data-type="reload">搜索</a>
                        </div>
                &nbsp;&nbsp;&nbsp;


            </div>
    </form>


<!--    <button id="button" class="layui-btn" data-type="reload">搜索</button>-->
</div>


<script type="text/html" id="toolbar">
    <shiro:hasPermission name="pu:add">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add" >
            <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area"></i>
            新增
        </button>
    </shiro:hasPermission>
</script>



<table class="layui-hide" id="test" lay-filter="test"></table>

<!--<script type="text/html" id="toolbarDemo">-->
<!--        <shiro:hasPermission name="pu:add">-->
<!--        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add" id="add">-->
<!--            <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area"></i>-->
<!--            新增-->
<!--        </button>-->
<!--        </shiro:hasPermission>-->
<!--</script>-->


<script type="text/html" id="barDemo">

    <shiro:hasPermission name="pu:editDetails">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="pu:del">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </shiro:hasPermission>
</script>

<script>
    layui.config({
        base: '/lib/layui/extend/'
    }).use(['table',  'layer', 'element', 'dtree', 'form', 'tablePlug'], function () {
        var table = layui.table,  layer = layui.layer;
        var $ = layui.$;
        var dtree = layui.dtree;
        var form = layui.form;
        var tablePlug = layui.tablePlug;

        tablePlug.smartReload.enable(true);

        form.on('submit(search)', function (form) {
            table.reload('role-table', {
                where: form.field
            });
            return false;
        });


                table.render({
                    elem: '#test'
                    ,url:'/pu/SelectAllsPUpdate'
                    , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    , response: {
                statusName: 'state' //规定数据状态的字段名称，默认：code
                , statusCode: 2000 //规定成功的状态码，默认：0
                ,msgName: 'SUCCESS' //规定状态信息的字段名称，默认：msg
                ,countName: 'count' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,title: '用户数据表'
            , request: {pageName: 'page', limitName: 'limit'}
            //
            , limit: 10
            , limits: [5, 10, 20, 30, 100]
            ,cols: [
                [
                    // {type: 'checkbox', fixed: 'left'}
                    {type: 'numbers', title: '序号', width: "5%"}
                    // ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                    ,{field:'variable', title:'变量', width:290, edit: 'text'}
                    ,{field:'groups', title:'报警组', width:140, edit: 'text'}
                    ,{field:'levels', title:'报警级别', width:140, edit: 'text', templet: '#tt'}
                    ,{field:'recovery', title:'恢复值', width:140}
                    ,{field:'plimit', title:'限值', width:100, edit: 'text', sort: true}
                    ,{field:'describes', title:'报警描述', width:200}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}
                ]
            ]
            ,page: true
            , id: 'testReload'
        });

        // //头工具栏事件
        // table.on('toolbar(test)', function(obj){
        //     var checkStatus = table.checkStatus(obj.config.id);
        //     switch(obj.event){
        //         case 'getCheckData':
        //             var data = checkStatus.data;
        //             layer.alert(JSON.stringify(data));
        //             break;
        //         case 'getCheckLength':
        //             var data = checkStatus.data;
        //             layer.msg('选中了：'+ data.length + ' 个');
        //             break;
        //         case 'isAll':
        //             layer.msg(checkStatus.isAll ? '全选': '未全选');
        //             break;
        //
        //         //自定义头工具栏右侧图标 - 提示
        //         case 'LAYTABLE_TIPS':
        //             layer.alert('这是工具栏右侧自定义的一个图标按钮');
        //             break;
        //     };
        // });

        // 工具条点击事件
        table.on('toolbar', function (obj) {
            var data = obj.data;
            var event = obj.event;

            if (event === 'add') {
                // alert("add1111");
                // layer.open({
                //     content: "add?id=" + id,
                //     title: "编辑",
                //     area: ['40%', '85%'],
                //     type: 2,
                //     offset: 'auto',
                //     maxmin: true,
                //     shadeClose: true,
                //     end: function () {
                //         // table.reload('user-table');
                //     }
                // });
                location.href = "add";
            }
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var id = data.id;

            if(obj.event === 'del'){
                layer.confirm('真的删除该条信息吗', function(index){
                    obj.del(
                        $.ajax({
                            url: "/pu/deleteById?id="+id,
                            type: "post",
                            dataType: "json",
                            success: function (json) {

                                if (json.state == 2000) {
                                    alert("删除成功！");
                                    // location.href = "/index";

                                } else {
                                    alert(json.message);
                                }
                            }
                        })

                    );
                    layer.close(index);

                });
            } else if(obj.event === 'edit'){
                // alert("编辑");
                layer.open({
                    content: "editDetails?id=" + id,
                    title: "编辑",
                    area: ['40%', '85%'],
                    type: 2,
                    offset: 'auto',
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        // table.reload('user-table');
                    }
                });
                // location.href = "editDetails?id=" + id;
                // location.href = "www.baidu.com"
            }
            else if(obj.event === 'add'){
                alert("add");
                // layer.open({
                //     content: "editDetails?id=" + id,
                //     title: "编辑",
                //     area: ['40%', '85%'],
                //     type: 2,
                //     offset: 'auto',
                //     maxmin: true,
                //     shadeClose: true,
                //     end: function () {
                //         // table.reload('user-table');
                //     }
                // });

            }
        });


        function add() {
            alert("add1111");
            layer.open({
                content: "editDetails?id=" + id,
                title: "编辑",
                area: ['40%', '85%'],
                type: 2,
                offset: 'auto',
                maxmin: true,
                shadeClose: true,
                end: function () {
                    // table.reload('user-table');
                }
            });
        }


        //表格的重载.
        var $ = layui.$, active = {
            reload: function(){
                var demovariable = $('#variable');
                var demogroups = $('#groups');
                var demolevels = $('#levels');
                // alert("variable="+demovariable);

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {

                        variable: demovariable.val(),
                        groups: demogroups.val(),
                        levels: demolevels.val()

                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
<br>
<script type="text/html" id="tt">
    {{# if (d.levels=="1") { }}
    {{"紧急报警"}}
    {{# }else if (d.levels=="2") { }}
    {{"重要报警"}}
    {{# }else if (d.levels=="3") { }}
    {{"一般报警"}}
    {{# }else{ }}
    {{d.type}}
    {{# } }}
</script>

<!--<script>-->
<!--    //JavaScript代码区域-->
<!--    layui.use('element', function(){-->
<!--        var element = layui.element;-->

<!--    });-->
<!--</script>-->

<!--<script>-->
<!--    layui.use(['laypage', 'layer'], function(){-->
<!--        var laypage = layui.laypage-->
<!--            ,layer = layui.layer;-->


<!--        //总页数大于页码总数-->
<!--        laypage.render({-->
<!--            elem: 'demo1'-->
<!--            ,count: 70 //数据总数-->
<!--            ,jump: function(obj){-->
<!--                console.log(obj)-->
<!--            }-->
<!--        });-->


<!--        //调用分页-->
<!--        laypage.render({-->
<!--            elem: 'demo20'-->
<!--            ,count: data.length-->
<!--            ,jump: function(obj){-->
<!--                //模拟渲染-->
<!--                document.getElementById('biuuu_city_list').innerHTML = function(){-->
<!--                    var arr = []-->
<!--                        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);-->
<!--                    layui.each(thisData, function(index, item){-->
<!--                        arr.push('<li>'+ item +'</li>');-->
<!--                    });-->
<!--                    return arr.join('');-->
<!--                }();-->
<!--            }-->
<!--        });-->

<!--    });-->
<!--</script>-->

</body>
<script>

    $("#add").click(function () {
        alert("add");
        // var username = $("#username").val();
        // var password = $("#password").val();
        // alert(username);
        // alert(password);
        // $.ajax({
        //     url: "reg",
        //     data: {"username": username, "password": password},
        //     /* "data":$("#form-reg").serialize(), */
        //     type: "post",
        //     dataType: "json",
        //     success: function (json) {
        //
        //         if (json.state == 2000) {
        //             alert("注册成功！");
        //             location.href = "login.html";
        //         } else {
        //             alert(json.message);
        //         }
        //     }
        // });
    });

</script>


<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function(){
            form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>


</html>